<!--  -->
<template>
  <div
    class="home"
    :style="{
      'background-image': this.$store.state.user.bgPict
        ? `url(${this.$store.state.user.bgPict})`
        : 'url(' + require('@/assets/Home/home_bg.jpg') + ')',
    }"
  >
    <div style="height: 60px">
      <h-menu @openSet="openSet"></h-menu>
    </div>
    <div style="height: calc(100% - 60px)">
      <drawer ref="drawermodel">
        <div slot="setting" style="width: 100%; height: 100%; overflow: hidden">
          <head-picture></head-picture>
        </div>
      </drawer>
      <router-view style="height: 100%" />
    </div>
  </div>
</template>

<script>
import HeadPicture from "./modules/HeadPicture.vue";
import Drawer from "./Drawer.vue";
import HMenu from "./HMenu.vue";
export default {
  data() {
    return {};
  },
  components: { HMenu, Drawer, HeadPicture },
  computed: {},
  mounted() {},
  methods: {
    openSet(val) {
      this.$refs.drawermodel.drawer = val;
    },
  },
};
</script>
<style lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("~@/assets/Home/tree.webp");
  background-size: 100% 100%;
}
</style>